<template>
    <div id="comment">
        <scroll class="more-list" ref="scroll"  v-if="commentList.length"
          :data="commentList" 
          :scrollY="scrollY" 
          :scrollX="scrollX"
          :bounce="bounce" 
          :pullup="pullup" 
          @scrollToEnd="_getMoreList">
          <div class="list" v-for="(item,index) in commentList" :key="index">
              <div class="user">
                <div class="avator">
                    <img :src="item.avatar" alt="">
                </div>
                <div class="msg">
                  <div class="name">{{item.username}}</div>
                  <div class="time">{{item.created_at}}</div>
                </div>
              </div>
              <div class="text" @click="viewALLHandle(item.id,item.userid)"><span>{{item.content}}</span></div>
              <div class="f-footer" :class="{active:!item.reply_list.length}">
                  <div class="m-diy-btn dz" :class="{active:item.is_like==1}" @click="dzHandle(item.userid,item.id,gameId,item)"> 
                    <i class="icon_dz"></i> {{item.like_num}}    
                  </div>
                <div class="m-diy-btn pl">
                    <router-link  to=""  @click.native="toPublish(gameId,item.username,item.id,item.userid)">
                        <i class="icon_pl"></i> {{item.comment_num}}
                    </router-link>
                </div>
              </div>
              <div class="answers-container" v-if="item.reply_list.length">
                <div class="answers" @click="viewALLHandle(item.id)">
                    <div class="answer" v-for="list in item.reply_list" :key="list.id">
                       <span class="account">{{list.username}}</span><span v-if="list.is_reply==1"> 回复 <span class="account">{{list.by_username}}</span> </span>：
                       {{list.content}}
                    </div>
                    <div class="allAnswers" v-if="item.comment_num>5">
                        全部{{item.comment_num}}条回复
                    </div>
                </div>
              </div>
          </div>
        </scroll>
        <!-- 没有数据 -->
        <noData v-else :title="'暂无评论'"></noData>
       <!-- 下拉加载显示 -->
      <div class="loadlist" v-show="commentList.length">
          <loadinglist :row="row"  :more="more"></loadinglist>
      </div>
    </div>
</template>
<script>
import {formatDate} from 'js/date'
import Loadinglist from "common/LoadingList"
import Scroll from "common/scroll"
import {getCommentList,gameLike} from 'api/game_box'
import noData from "common/noData"
import {logStatus} from 'api/login'
export default {
  props:{
    commentObj:{
      type:Object,
      default:{},
    },
    gameId:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
        commentList:[], //评论列表
        row: true,     //loading文字水平显示
        isload: false, //是否正在加载
        scrollY: true,  //垂直滚动
        scrollX: false, //水平滚动
        pullup: true,   //上拉加载
        beforeScroll: true,
        bounce: false,  //动画
        more:true,      //下拉加载是否还有更多
        page:1
    };
  },
  methods:{
    dzHandle(userid,id,gameid,item){
      if(item.is_like==1){
        return;
      }
      gameLike(userid,id,gameid).then(res=>{
        if (res.data.error == 0) {
            item.is_like=1;
            item.like_num++;
        }
      })
    },
    viewALLHandle(id){
        this.$router.push({
            path: `/gameDetail/viewAll`,
            query:{id:id,gameId:this.gameId}
        });
    },
    toPublish(gameId,username,pid,by_userid){
          logStatus().then(res=>{
             if (res.data.error == 0) {
                    this.$router.push({
                       path:'/gameDetail/publish',query:{gameId:gameId,username:username,pid:pid,by_userid:by_userid}
                    });
                }else{
                    this.$router.replace({
                    path: '/login',
                    query: {redirect:  this.$router.currentRoute.fullPath}
                })
              }
          })
    },
    _getMoreList(){
        if (this.isload == true) {
            return;
        }
        this.page++;
        this.isload = true;
        getCommentList(this.gameId,this.page,"").then(res=>{
          if (res.data.error == 0) {
                  let totalPage=res.data.content.totalPage;
                  res = res.data.content.data;
                  this.isload = false;
                  this.commentList = this.commentList.concat(res);
                  if(this.page==totalPage){
                      this.more = false;
                      this.isload = true;
                  }
          }
        })
    }
  },
  watch:{
    commentObj:{
      handler(newValue) {
          if(this.commentObj.error==0){
              this.page=1;
              this.isload = false;
              this.more = true;
              this.commentList=this.commentObj.content.data;
              let totalPage=this.commentObj.content.totalPage;
              if(this.page==totalPage){
                  this.more = false;
                  this.isload = true;
              }
          }else{
              this.more = false;
              this.isload=true;
          } 
　　　　}
    }
  },
  components:{
    Loadinglist,
    Scroll,
    noData
  }
};
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
#comment {
  position:relative;
  min-height: 4rem;
  .list {
    margin-top: 0.2rem;
    padding:0 0.3rem;
    .user {
      display: flex;
      align-items: center;
      .avator {
        margin-right: 0.1rem;
        img {
          width: 0.7rem;
          height: 0.7rem;
          border-radius: 50%;
        }
      }
      .name {
        font-size: $font-size-m;
      }
      .time {
        font-size: 10px;
        color: #8e8e93;
      }
    }
    .text {
      margin-top: 0.1rem;
      padding-left: 0.8rem;
      word-wrap:break-word;
    }
    .f-footer {
      margin: 0.1rem 0;
      display: flex;
      justify-content: flex-end;
      .m-diy-btn {
        margin-left: 0.4rem;
        display: flex;
        align-items: center;
      }
      .icon_pl {
        vertical-align: top;
        margin-right: 0.05rem;
        display: inline-block;
        width: 0.38rem;
        height: 0.32rem;
        background-size: 100% 100%;
        @include bg-image("../../assets/image/icon_pinglun");
      }
      .active{
        color:$color-focus;
        .icon_dz{
          @include bg-image("../../assets/image/icon_ydianzan");
        }
      }
      .icon_dz {
        margin-right: 0.05rem;
        display: inline-block;
        width: 0.37rem;
        height: 0.34rem;
        background-size: 100% 100%;
        @include bg-image("../../assets/image/icon_dianzan");
      }
      &.active{
        margin-left:0.8rem;
        padding-bottom:0.16rem;
        border-bottom:1px solid #f2f2f2;
      }
    }
    .answers-container {
      margin-left: 0.8rem;
      padding-bottom: 0.16rem;
      border-bottom: 1px solid #f2f2f2;
    }
    .answers {
      padding: 0.14rem;
      background: #f5f5f5;
      .answer {
        margin-bottom: 0.1rem;
        color: #8e8e93;
        .account {
          color: $color-focus;
        }
      }
    }
    .allAnswers {
      color: $color-focus;
      text-align: right;
    }
  }
}
.loadlist{
  margin-top:0.2rem;
}
</style>